<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">E网络关键字告警</h5>
                    <div class="stayRight ">
                        <el-button @click="netWorkList(1)" icon="star-off">刷新</el-button>
                        <el-button type="primary" @click="createNetWorkMonitor()">创建关键字监控</el-button>
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchIpt">
                            <el-input v-model="searchStr" placeholder="请输入产品类型或故障资源进行搜索"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="netWorkList(1)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="name" label="名称"> </el-table-column>
                    <el-table-column prop="index" label="项目索引"> </el-table-column>
                    <el-table-column prop="keyWord" label="关键"> </el-table-column>
                    <el-table-column prop="consecutiveTimes" label="时间窗"> </el-table-column>
                    <el-table-column prop="channelSilenceTime" label="沉默时间"> </el-table-column>
                    <el-table-column prop="startTime" label="开始时间"> </el-table-column>
                    <el-table-column prop="endTime" label="结束时间"> </el-table-column>
                    <el-table-column prop="contactsGroupName" label="通知对象"> </el-table-column>
                    <el-table-column label="操作">
                        <template scope="scope">
                            <el-button  size="small"  type="text"   @click="createNetWorkMonitor(scope.$index, dataArr)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <div class="pullLeft">
                        <el-button  size="small" name="button-del" @click="delAll()" :disabled="pdisabled">批量删除</el-button>
                    </div>
                </div>

            </section>


            <el-dialog :title="monitorTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false">
                <!-- <h4 class="dialogtitle">创建监控点</h4> -->
                <div class="scoreContainer tagCategory">
                    <el-form :model="netWorkForm" :rules="rules" ref="netWorkForm" label-width="120px" class="demo-netWorkForm">
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="netWorkForm.name" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label="项目索引" prop="consecutiveTimes">
                            <el-select v-model="netWorkForm.index" placeholder="请选择">
                                <el-option label="logstash-switchboard-log-*" value="logstash-switchboard-log-*"></el-option>
                                <el-option label="logstash-prod-bup-cms-os_messages_log*" value="logstash-prod-bup-cms-os_messages_log*"></el-option>
                                <el-option label="logstash-prod-bup-collect-os_messages_log*" value="logstash-prod-bup-collect-os_messages_log*"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关键字" prop="keyWord">
                            <el-input v-model="netWorkForm.keyWord" placeholder="请输入查询message字段关键字"></el-input>
                        </el-form-item>
                        <el-form-item label="时间窗" prop="consecutiveTimes">
                            <el-select v-model="netWorkForm.consecutiveTimes" placeholder="请选择">
                                <el-option label="10分钟" value="10"></el-option>
                                <el-option label="30分钟" value="30"></el-option>
                                <el-option label="60分钟" value="60"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="沉默通道时间" prop="channelSilenceTime">
                            <el-select v-model="netWorkForm.channelSilenceTime" placeholder="请选择">
                                <el-option label="1小时" value="1"></el-option>
                                <el-option label="12小时" value="12"></el-option>
                                <el-option label="24小时" value="24"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生效时间">
                            <el-time-select
                              placeholder="起始时间"
                              v-model="netWorkForm.startTime"
                              :picker-options="{
                                start: '00:00',
                                step: '01:00',
                                end: '23:00'
                              }">
                            </el-time-select>
                            <el-time-select
                              placeholder="结束时间"
                              v-model="netWorkForm.endTime"
                              :picker-options="{
                                start: '00:59',
                                step: '01:00',
                                end: '23:59',
                                minTime: netWorkForm.startTime
                              }">
                            </el-time-select>
                        </el-form-item>
                        <el-form-item label="通知对象" prop="transfer">
                            <el-transfer 
                              filterable
                             :footer-format="{
                                noChecked: '共${total}项',
                                hasChecked: '已选${checked}/${total} 项'
                              }"
                             :titles="['联系人通知组', '已选联系组']"  
                             v-model="netWorkForm.contactsGroupIds" 
                             :data="contactsGroupList"> 
                            </el-transfer>
                        </el-form-item>
                        
                    </el-form>
                   
                </div>          
                <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="creatSubmit('netWorkForm')">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import { queryNetWorkList, getAlarmContactsGroupList, modifyNetWork, deleteNetWorkByIds } from '@/api/alarmRulesData'
export default {
  data() {
    return {
      dataArr: null,
      monitorTitle: '',
      dataAddress: [],
      listLoading: true,
      isNotPermission: '',
      advancedSettings: false,
      pdisabled: true,
      creatDialogVislble: false,
      currentSetting: '',
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      hightsetting: false,
      hasError: false,
      selected: '',
      tpvalue: '',
      searchStr: '',
      multipleSelection: [],
      typeMonitorOptions: [{
        tpvalue: 'HTTP'
      }, {
        tpvalue: 'TCP'
      }, {
        tpvalue: 'PING'
      }],
      contactsGroupList: [],
      netWorkForm: {
        name: '',
        index: '',
        keyWord: '',
        consecutiveTimes: '',
        channelSilenceTime: '',
        startTime: '',
        endTime: '',
        contactsGroupIds: []
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        keyWord: [
          { required: true, message: '请输入关键字', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.netWorkList(1)
    this.generateAlarmContactsGroupList()
  },
  methods: {
    netWorkList(curr) {
      this.listLoading = true
      var listQuery = { currPage: curr, searchStr: this.searchStr, pageSize: this.pagesz }
      queryNetWorkList(listQuery).then(response => {
        console.log(response.data)
        this.dataArr = response.data.data
        this.listLoading = false
        this.totalSize = response.data.totalRows
        this.currentPage = curr
      })
    },
    generateAlarmContactsGroupList() {
      getAlarmContactsGroupList().then(response => {
        if (response.data.code === 0) {
          response.data.data.forEach(function(element) {
            this.contactsGroupList.push({
              key: element.id,
              label: element.name
            })
          }, this)
        }
      })
    },
    createNetWorkMonitor(index, data) {
      this.creatDialogVislble = true
      if (data !== undefined) {
        this.monitorTitle = '修改关键字监控'
        this.netWorkForm = {
          id: data[index].id,
          name: data[index].name,
          index: data[index].index,
          keyWord: data[index].keyWord,
          consecutiveTimes: data[index].consecutiveTimes,
          channelSilenceTime: data[index].channelSilenceTime,
          startTime: data[index].startTime,
          endTime: data[index].endTime,
          contactsGroupIds: data[index].contactsGroupIdList
        }
      } else {
        this.monitorTitle = '创建关键字监控'
        this.netWorkForm = {
          name: '',
          keyWord: '',
          index: 'logstash-switchboard-log-*',
          consecutiveTimes: '10',
          channelSilenceTime: '24',
          startTime: '00:00',
          endTime: '23:59',
          contactsGroupIds: []
        }
      }
    },
    creatSubmit(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认保存关键字告警规则？', '提示', {
            type: 'warning'
          })
          .then(_ => {
            var formParams = { formParams: JSON.stringify(this.netWorkForm) }
            modifyNetWork(formParams).then(response => {
              if (response.data.code === 0) {
                _this.creatDialogVislble = false
                _this.netWorkList(1)
                _this.$message({
                  message: '操作成功!',
                  type: 'success'
                })
              } else {
                _this.$message({
                  message: response.data.msg,
                  type: 'warning'
                })
              }
            })
          })
          .catch(_ => {})
        }
      })
    },
    sethigh() {
      this.hightsetting = true
    },
    handleSizeChange(val) {
      this.pagesz = val
      this.netWorkList(1)
    },
    handleCurrentChange(val) {
      this.netWorkList(val)
    },
    delAll() {
      this.$confirm('确认删除关键字告警规则？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        const idQuery = []
        this.multipleSelection.forEach(function(element) {
          idQuery.push(element.id)
        }, this)
        const obj = {
          ids: idQuery.join(',')
        }
        deleteNetWorkByIds(obj).then(response => {
          if (response.data.code === 0) {
            this.netWorkList(1)
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}
.statusError{
    color: red;
}
</style>


